<template>
    <page-container>
        <cu-custom slot="header" bgColor="bg-white" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">支付结果页</block>
        </cu-custom>
        <view slot='center' class="container" :data-theme="themeStyle">
            <template>
                <template v-if="payInfo.pay_status">
                    <image :src="$util.img('upload/uniapp/pay_success.png')" mode="widthFix" class="result-image"></image>
                    <view class="msg">{{ $lang('paymentSuccess') }}</view>
                    <view class="pay-amount">
                        ￥
                        <text>{{ payInfo.pay_money }}</text>
                    </view>
                </template>
                <template v-else>
                    <image :src="$util.img('upload/uniapp/pay_fail.png')" mode="widthFix" class="result-image"></image>
                    <view class="msg" v-if="count>2">{{ $lang('paymentFail') }}</view>
                    <view class="msg" v-else>{{ $lang('paymentWait') }}</view>
                </template>
                <view class="action">
                    <view class="btn" @click="goMemberIndex()">{{ $lang('memberCenter') }}</view>
                    <!-- color-base-bg color-base-border -->
                    <view class="btn go-home" style="border-color: #ffd332;background-color:#ffd332;" @click="goHome()">{{ $lang('goHome') }}</view>
                </view>
                <ns-goods-recommend></ns-goods-recommend>
            </template>
            <loading-cover ref="loadingCover"></loading-cover>
        </view>
    </page-container>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js'
export default {
	data() {
		return {
			payInfo: {},
			outTradeNo: '',
			token: null,
			paySource: '',
			timer: null,
			count: 0
		}
	},
	mixins: [globalConfig],
	onLoad(option) {
		if (option.code) this.outTradeNo = option.code
		/**
         * app调起的小程序
         */
		// #ifdef MP-WEIXIN
		if (option.entrance && option.entrance == 'app') {
			this.pay()
		}
		// #endif
		this.paySource = uni.getStorageSync('paySource')
	},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh()
		if (uni.getStorageSync('token')) this.token = uni.getStorageSync('token')
		this.getPayInfo()
	},
	destroyed() {
		clearTimeout(this.timer)
	},
	onUnload() {
		clearTimeout(this.timer)
	},
	methods: {
		getPayInfo() {
			this.count = ++this.count
			this.$api.sendRequest({
				url: '/api/pay/info',
				data: {
					out_trade_no: this.outTradeNo
				},
				success: res => {
					if (res.code >= 0 && res.data) {

						if (this.$refs.loadingCover) this.$refs.loadingCover.hide()

						if (res.data.pay_status == 2) {
							this.count = 5 // 用于控制 显示支付状态
							this.payInfo = res.data
							return
						}
						if (this.count > 4) {
							this.payInfo = res.data
						}

						if (res.data.pay_status == 0) {
							this.timer = setTimeout(() => {
								console.log('进来了', this.count)
								this.getPayInfo()
							}, 2000)
						}

					} else {
						this.$util.showToast({
							title: '未获取到支付信息！'
						})
						setTimeout(() => {
							this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch')
						}, 1000)
					}
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide()
				}
			})
		},
		goHome() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch')
		},
		toOrderDetail(id) {
			if (this.payInfo.order_type == 2) {
				this.$util.redirectTo('/shopPages/order/detail_pickup/detail_pickup', { order_id: id }, 'redirectTo')
			} else if (this.payInfo.order_type == 3) {
				this.$util.redirectTo('/shopPages/order/detail_local_delivery/detail_local_delivery', { order_id: id }, 'redirectTo')
			} else if (this.payInfo.order_type == 4) {
				this.$util.redirectTo('/shopPages/order/detail_virtual/detail_virtual', { order_id: id }, 'redirectTo')
			} else {
				this.$util.redirectTo('/shopPages/order/detail/detail', { order_id: id }, 'redirectTo')
			}
		},
		toRecharge() {
			this.$util.redirectTo('/otherpages/recharge/order_list/order_list', {}, 'redirectTo')
			uni.setStorageSync('paySource', '')
		},
		goMemberIndex() {
			this.$util.redirectTo('/shopPages/order/list/list', {}, 'reLaunch')
		},
		/**
         * 只有在APP 调起小程序时 使用
         */
		pay() {
			this.$api.sendRequest({
				url: '/api/pay/pay',
				data: {
					out_trade_no: this.outTradeNo,
					pay_type: 'wechatpay',
					is_matched: 0
				},
				success: res => {
					uni.hideLoading()
					if (res.code >= 0) {
						var payData = res.data.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payData.timeStamp,
							nonceStr: payData.nonceStr,
							package: payData.package,
							signType: payData.signType,
							paySign: payData.paySign,
							success: res => {
								this.$util.redirectTo('/pages/pay/result/result', { code: this.outTradeNo }, '', 'redirectTo')
							},
							fail: res => {
								this.flag = false
								if (res.errMsg == 'requestPayment:fail cancel') {
									this.$util.showToast({ title: '您已取消支付' })
								} else {
									uni.showModal({ content: '支付失败,失败原因: ' + res.errMsg, showCancel: false })
								}
								setTimeout(() => {
									this.$util.redirectTo('/pages/pay/result/result', { code: this.outTradeNo }, 'redirectTo')
								}, 1000)
							}
						})
					} else {
						this.$util.showToast({ title: res.message })
						setTimeout(() => {
							this.$util.redirectTo('/pages/pay/result/result', { code: this.outTradeNo }, 'redirectTo')
						}, 1000)
					}
				},
				fail: res => {
					uni.hideLoading()
					this.$util.showToast({ title: 'request:fail' })
				}
			})

		}
	}
}
</script>

<style lang="scss">
.container {
    padding-top: 94rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .result-image {
        width: 168rpx;
        height: 120rpx;
    }
    .msg {
        font-size: $font-size-toolbar;
        margin-top: 66rpx;
        height: $font-size-toolbar;
        line-height: $font-size-toolbar;
    }
    .pay-amount {
        font-size: 30rpx;
        margin-top: 30rpx;
        font-weight: 600;
        height: 50rpx;
        line-height: 50rpx;

        text {
            font-size: 50rpx;
        }
    }
    .action {
        width: 100%;
        height: 80rpx;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        margin-top: 90rpx;

        .btn {
            font-size: $font-size-base;
            width: 240rpx;
            height: 80rpx;
            line-height: 76rpx;
            text-align: center;
            border-radius: 40rpx;
            border: 1px solid $color-tip;
            box-sizing: border-box;

            &:last-child {
                color: #ffffff;
                margin-left: 100rpx;
                color: #000000;
            }
        }
    }
}
</style>
